<script setup lang="ts">
import { ref  } from 'vue'
import { useRouter } from "vue-router"
import img_card from "./img_card.vue";
import course_card from './course_card.vue'

// let activeName = ref('1');

// let selectedMenuItem = ref('') // 记录选中的菜单项
//
// function handleSelect(index:any) {
//   // 更新选中的菜单项
//   selectedMenuItem = index;
// }

const activeName = ref('1')
const activeName1 = ref('5')
const router=useRouter()
const handleClick = (tab: TabsPaneContext, event: Event) => {
  if(tab.index==4){
    router.push("/common")
  }
}

</script>

<template>
  <div class="main">
    <div class="img-card">
      <img_card></img_card>
    </div>

    <div class="demo-collapse">
      <el-collapse :default-active="activeName" accordion>
        <el-collapse-item name="1" :key="activeName">
          <template #title>
            <div style="font-size: 24px;font-weight: 800;margin-left: 20px;margin-top: 2px">课程</div>
<!--            <el-menu @click.stop @select="handleMenuSelect" ellipsis class="el-menu-popper-demo" mode="horizontal" :popper-offset="16" style="max-width: 600px">-->
<!--              <el-menu-item index="1">推荐</el-menu-item>-->
<!--              <el-menu-item index="2">前端开发</el-menu-item>-->
<!--              <el-menu-item index="3">后端开发</el-menu-item>-->
<!--              <el-menu-item index="4">精品免费</el-menu-item>-->
<!--            </el-menu>-->

            <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 20px;margin-top: 2px" @click.stop>
              <el-tab-pane label="推荐" name="1"></el-tab-pane>
              <el-tab-pane label="前端开发" name="2"></el-tab-pane>
              <el-tab-pane label="后端开发" name="3"></el-tab-pane>
              <el-tab-pane label="精品免费" name="4"></el-tab-pane>
               <el-tab-pane label="common" name="5"></el-tab-pane>
            </el-tabs>

          </template>
          <template #default>
            <view v-show="activeName === '1'" class="course">
              <router-link :to="{ path: '/course_main' }">
                <course_card></course_card>
              </router-link>
              <router-link :to="{ path: '/course_main' }">
               <course_card></course_card>
              </router-link>
              <router-link :to="{ path: '/course_main' }">
                <course_card></course_card>
              </router-link>
              <router-link :to="{ path: '/course_main' }">
                <course_card></course_card>
              </router-link>
            </view>
          </template>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>

  <el-collapse :default-active="activeName1" accordion>
    <el-collapse-item name="5" :key="activeName">
      <template #title>
        <div style="font-size: 24px;font-weight: 800;margin-left: 20px;margin-top: 2px">Gitee分工图</div>
      </template>
      <el-card shadow="always" class="card">
        <div class="gitee">
          <img src="./img/gitee_push.jpg" alt="" width="800px">
        </div>

        <div class="fengong">
          <img src="./img/fengong.png" alt="" width="800px">
        </div>
      </el-card>
    </el-collapse-item>
  </el-collapse>


</template>
<style scoped>
.el-menu-popper-demo
{
  //width: 600px;
  height: 100%;
  //max-width: 600px;
  margin-left: 20px;
  margin-top: 2px;
}
.el-menu--horizontal.el-menu
{
  border-bottom:none;
}
.course
{
  display: flex;
  flex-wrap: wrap;
}
.img-card
{
  text-align: center;
  margin-bottom: 50px;
  align-items: center;
  justify-items: center;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.main
{
  position: relative;
}
</style>